<template>
  <div class="container">
    <div class="search-bar">
      <el-row :span="24">
        <el-col :span="6">
                <el-input
                v-model="searchQuery"
                placeholder="请输入搜索内容"
                clearable
                @clear="clearSearch"
                @enter="search"
              ></el-input>
        </el-col>
        <el-col :span="3">
          <el-button type="primary" @click="search">搜索题目</el-button>
        </el-col>
        <el-col :span="3">
          <el-button type="primary" @click="showImportDialog">导入题目</el-button>
        </el-col>
      </el-row>
      
    </div>
    <el-table :data="questionList" border>
      <el-table-column type="index" label="序号"></el-table-column>
      <el-table-column prop="name" label="题目名称"></el-table-column>
      <el-table-column prop="createdDate" label="创建日期"></el-table-column>
      <el-table-column label="操作">
        <template #default="{ row }">
          <el-button type="text" @click="viewQuestion(row)">查看题目</el-button>
          <el-button type="text" @click="deleteQuestion(row)">删除题目</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog v-model="importDialogVisible" title="导入题目" @close="resetImportDialog">
      <el-upload
        class="upload-container"
        action="/upload"
        :before-upload="beforeUpload"
        :on-success="handleUploadSuccess"
        :on-error="handleUploadError"
        drag
      >
         <el-icon class="el-icon--upload"><upload-filled /></el-icon>
        <div class="upload-text">将文件拖到此处，或点击上传</div>
      </el-upload>
      <div class="dialog-footer">
        <el-button @click="cancelImportDialog">取消</el-button>
        <el-button type="primary" @click="confirmImportDialog">确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { ElButton, ElInput, ElTable, ElTableColumn, ElDialog, ElUpload, ElIcon } from 'element-plus';

const questionList = reactive([
  { name: '题目1', createdDate: '2023-01-01' },
  { name: '题目2', createdDate: '2023-02-01' },
  { name: '题目3', createdDate: '2023-03-01' },
]);

const searchQuery = ref('');
const importDialogVisible = ref(false);

const clearSearch = () => {
  searchQuery.value = '';
};

const search = () => {
  // 处理搜索逻辑
};

const showImportDialog = () => {
  importDialogVisible.value = true;
};

const resetImportDialog = () => {
  importDialogVisible.value = false;
};

const cancelImportDialog = () => {
  resetImportDialog();
};

const confirmImportDialog = () => {
  // 处理导入题目逻辑
  resetImportDialog();
};

const beforeUpload = (file) => {
  // 处理上传前的逻辑，例如文件类型、大小检查等
};

const handleUploadSuccess = (response, file) => {
  // 处理上传成功的逻辑
};

const handleUploadError = (error, file) => {
  // 处理上传失败的逻辑
};
</script>

<style scoped>
.container {
  margin: 20px;
}

.search-bar {
  margin-bottom: 10px;
}

.upload-container {
  border: 1px dashed #409eff;
  border-radius: 6px;
  padding: 20px;
  text-align: center;
  cursor: pointer;
}

.upload-text {
  margin-top: 10px;
  color: #999;
}

.dialog-footer {
  text-align: right;
}
</style>
